<template lang="html">
<div>
	<div class="label">
	    <div>
	      <div>
	      	<img src="../../assets/icon/fdj1.png" alt="">
	    	 <input type="text">             
	      </div>
	      <ul>
	      	<li v-for="(item,index) in label" :key="index">
              
	      	    <span>{{item.title}}</span>

               <img src="../../assets/icon/list4.png" alt=""> 
	        </li>
	      </ul>
	    </div>

	    <div class="tips">
	    	<p>在"<span>{{this.id}}</span>"分类下,找到800门课程</p>
	    </div>
	</div>

	 <div class="list_boxs">
	    <ul>
	    	<router-link tag='li' :to="{name:'detailspage',params:{id:item.title,haha:item.price}}" v-for="(item,index) in details" :key="index">
	    		<img src="../../assets/icon/w2.jpg" alt="">
	    		<div>
	    			<h1>{{item.title}}</h1>
	    			<p>{{item.suit}}</p>
	    			<p class="list_p">
	    				<span class="list_span1">{{item.price}}</span>
	    				<span class="list_span2">{{item.buy}}</span>
	    			</p>
	    		</div>
	    	</router-link>
	    </ul>
	 </div>

      <div class="Load_more" @click="moreclick">加载更多</div>
</div>
</template>
<script>
	export default{
		name:'index',
		data(){
			return{
         details:[],
				label:[
               {
               	title:"综合排序",                   	
               },
               {
               	 title:"公务员",                 
               },
               {
               	title:"筛选",                   	
               },
			       ]
			    }
		    },
    mounted(){
         // 第一次调用
          this.datarequest()    
        },
    methods:{
       moreclick(event){
           console.log(event)
           this.datarequest()
       },
       datarequest(){
          this.$axios.get(this.HOST+"/details")
                  .then(data=>{
                      console.log(data.data.data)
                      var allData = this.details.concat(data.data.data)
                      this.details=allData
                      // console.log(this.contents)
                  })
                  .catch(error=>{console.log(error)})
                   this.label[1].title = this.id
                } 
            },
    
      props:["id"]
	}
</script>
<style lang="less" scoped> 
div{
	.label{
		div{
			width: 100%;
			height: 90px;
            background-color: rgba(63,178,253);
            border:1px solid rgba(255,255,255);
            div{
               width:340px;
               height: 30px;
               background-color: rgba(255,255,255);
               margin:0 auto;
               border:1px solid rgba(255,255,255);
               border-radius: 10px;
               margin-top: 15px;
               input{
               	width: 300px;
               	height: 100%;
               	float: right;
               }
               img{
               	width: 20px;
               	height: 20px;
               	margin-top:5px;
               }
            }
           ul{
           	width:100%;
           	height: 20px;
           	margin-top: 10px;
            text-align: center;
           	li{
           	   float: left;
           	   width: 125px;
           	   color:rgba(255,255,255);
           	   img{
           	   	   width: 19px;
           	   	   height: 19px;
           	   	   margin-left:5px;
           	   }
           	   span{
           	   	margin-left:5px; 
           	   }
           	}
           }

		}
		.tips{
			width: 100%;
			height:30px;
			line-height: 30px;
            background-color:rgba(238,238,238);
            span{
            	color:rgba(37,167,216);
            }

		}		
	}
	.list_boxs{
			width: 360px;
			margin:0 auto;
			margin-top: 10px;
           ul{
           	width: 100%;
           	li{
           		width: 100%;
           		height:150px;
           		overflow: hidden;
           		img{
           			width: 160px;
           			height: 130px;
           			float: left;
           			margin-top: 10px;
           		}
           		div{
           			width: 195px;
           			height: 130px;
           			float: right;
           			margin-top: 10px;
           			h1{
           				text-align: left;
           			}
           			p{
           				text-align: left;
           				margin-top: 3px;
           			}
           			.list_p{
           				margin-top:65px;
           				span{
           					color:rgba(251,140,52);
           				}
           				.list_span1{
           				  float: left;
           				  font-size:18px;
           				}
           				.list_span2{
           				   float: right; 
           				}
           			}
           		}
           	}
           }
		     }
      .Load_more{
        width: 100%;
        height: 30px;
        line-height: 30px;
        background-color:rgba(238,238,238);
        margin-bottom: 60px;
      }
    }
</style>